import "./index.less";
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import data from "./data.json";
import { Checkbox, Col, Empty, Row } from "antd";
import { useEffect, useState } from "react";
let timeout: any;
const UseHooks = () => {
	const [checkboxData, setCheckbox] = useState([]);
	const changeFn = ({ target }: any) => {
		clearTimeout(timeout);
		timeout = setTimeout(() => {
			let arr: any[] = [];
			data.forEach((item: any) => {
				if (item.label.includes(target.value)) {
					arr = [...arr, item];
				}
			});
			setCheckbox(arr);
		}, 300);
	};
	const formSchema: FormSchema[] = [
		{
			label: "From Date",
			field: "From Date",
			component: "DatePicker",
			colProps: { span: 4 }
		},
		{
			label: "To Date",
			field: "To Date",
			component: "DatePicker",
			colProps: { span: 20 }
		},
		{
			label: "template",
			field: "template",
			component: "Input",
			componentProps: {
				onChange: changeFn
			},
			colProps: { span: 24 }
		}
	];
	const [register] = useForm({
		schemas: formSchema,
		labelWidth: 100
	});

	useEffect(() => {
		setCheckbox(data);
		return () => {
			clearTimeout(timeout);
		};
	}, []);
	return (
		<div className="medicalExaminationBook">
			<div className="page-content">
				<div className="form">
					<BasicForm register={register}></BasicForm>
				</div>
				<div className="checkbox">
					<div className="Group">
						<Checkbox.Group>
							<Row>
								{checkboxData.map((item: any, index: number) => {
									return (
										<Col span={24} key={index}>
											<Checkbox value={item.value}>{item.label}</Checkbox>
										</Col>
									);
								})}
							</Row>
						</Checkbox.Group>
					</div>
					{checkboxData.length === 0 ? <Empty /> : ""}
				</div>
			</div>
		</div>
	);
};

export default UseHooks;
